<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
      
        $('#test1').gmap3(
          { action: 'addMarker',
            latLng: [46.578498,2.457275],
            map:{
              center: true,
              zoom: 5,
              mapTypeId: google.maps.MapTypeId.TERRAIN
            },
            marker:{
              options:{
                draggable:true
              },
              events:{
                dragend: function(marker){
                  $(this).gmap3({
                    action:'getAddress',
                    latLng:marker.getPosition(),
                    callback:function(results){
                      var map = $(this).gmap3('get'),
                          infowindow = $(this).gmap3({action:'get', name:'infowindow'}),
                          content = results && results[1] ? results && results[1].formatted_address : 'no address';
                      if (infowindow){
                        infowindow.open(map, marker);
                        infowindow.setContent(content);
                      } else {
                        $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: content}});
                      }
                    }
                  });
                }
              }
            }
          }
          );
      });
    </script>
  <body>
    <div id="test1" class="gmap3"></div>
    drag & drop the marker to see the address
  </body>
</html>